<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="退租物业交割单" name="first">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="收房合同号" prop="id">
            <el-input v-model="ruleForm.id" style="width: 250px" disabled></el-input>
            <el-button type="warning" @click="chaxun()">收房合同查询</el-button>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收房合同编号" prop="sfContractNo">
                <el-input v-model="ruleForm.sfContractNo" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产信息" prop="houseName">
                <el-input v-model="ruleForm.houseName" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产权地址" prop="cqAddress">
                <el-input v-model="ruleForm.cqAddress" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="房产证书编号" prop="houseZsNo">
                <el-input v-model="ruleForm.houseZsNo" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="业主姓名" prop="ownerName">
                <el-input v-model="ruleForm.ownerName" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主联系方式" prop="ownerMobile">
                <el-input v-model="ruleForm.ownerMobile" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="签约人姓名" prop="signUserName">
                <el-input v-model="ruleForm.signUserName" style="width: 250px" disabled></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="签约人电话" prop="signUserMobile">
                <el-input v-model="ruleForm.signUserMobile" style="width: 250px" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="物业交割日期" prop="wyjgDate">
                <el-date-picker
                  v-model="ruleForm.wyjgDate"
                  type="date" value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="解约类型" prop="terminationType">
                <el-select
                  v-model="ruleForm.terminationType"
                  clearable
                  size="small"
                  style="width: 250px"
                >
                  <el-option
                    label="合同到期"
                    :value="1"
                  />
                  <el-option
                    label="业主提前解约"
                    :value="2"
                  />
                  <el-option
                    label="我方退租解约"
                    :value="3"
                  />
                  <el-option
                    label="其他"
                    :value="4"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="spans">
            <el-row>
              <b>应退</b>
            </el-row>
            <el-row>
              <el-col :span="6"><b>类型</b></el-col>
              <el-col :span="6"><b>金额（元）</b></el-col>
              <el-col :span="6"><b>备注</b></el-col>
              <el-col :span="6"><b>操作 &nbsp;&nbsp;<el-button height="14" width="14" style="margin-left: 20px" @click="addDomain" class="el-icon-circle-plus-outline" ></el-button></b></el-col>
            </el-row>
            <el-row>
              <el-form-item
                v-for="(domain, index) in ruleForm.sfFinalStatementDetailList"
                :key="domain.key"
                :prop="'sfFinalStatementDetailList.' + index + '.value'">
                <el-col :span="6">
                  <el-select v-model="domain.itemType" placeholder="请选择退费类型">
                    <el-option
                      label="违约金"
                      value="1">
                    </el-option>
                    <el-option
                      label="租金"
                      value="2">
                    </el-option>
                    <el-option
                      label="水费"
                      value="3">
                    </el-option>
                    <el-option
                      label="电费"
                      value="4">
                    </el-option>
                    <el-option
                      label="煤气/煤气"
                      value="5">
                    </el-option>
                    <el-option
                      label="有线电视费"
                      value="6">
                    </el-option>
                    <el-option
                      label="其它费用"
                      value="7">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6"><el-input v-model="domain.amount" @change="returnpriceCount(domain.amount,index)" placeholder="0.00"></el-input></el-col>
                <el-col :span="6"><el-input v-model="domain.detailRemark" placeholder="备注"></el-input></el-col>
                <el-col :span="6"><el-button height="14" width="14" style="margin-left: 20px" @click="removeDomain(domain)" class="el-icon-remove-outline" ></el-button></el-col>
              </el-form-item>
            </el-row>
          </div>

          <br>
          <br>
          <div class="spans">
            <el-row>
              <b>应收</b>
            </el-row>
            <el-row>
              <el-col :span="6"><b>类型</b></el-col>
              <el-col :span="6"><b>金额（元）</b></el-col>
              <el-col :span="6"><b>备注</b></el-col>
              <el-col :span="6"><b>操作 &nbsp;&nbsp;<el-button height="14" width="14" style="margin-left: 20px" @click="addDomains" class="el-icon-circle-plus-outline" ></el-button></b></el-col>
            </el-row>
            <el-row>
              <el-form-item
                v-for="(domain, index) in ruleForm.sfFinalStatementDetailLists"
                :key="domain.key"
                :prop="'sfFinalStatementDetailLists.' + index + '.value'">
                <el-col :span="6">
                  <el-select v-model="domain.itemType" placeholder="请选择收费类型">
                    <el-option
                      label="违约金"
                      value="1">
                    </el-option>
                    <el-option
                      label="租金"
                      value="2">
                    </el-option>
                    <el-option
                      label="水费"
                      value="3">
                    </el-option>
                    <el-option
                      label="电费"
                      value="4">
                    </el-option>
                    <el-option
                      label="煤气/煤气"
                      value="5">
                    </el-option>
                    <el-option
                      label="有线电视费"
                      value="6">
                    </el-option>
                    <el-option
                      label="其它费用"
                      value="7">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="6"><el-input v-model="domain.amount" @change="getpriceCount(domain.amount,index)" placeholder="0.00"></el-input></el-col>
                <el-col :span="6"><el-input v-model="domain.detailRemark" placeholder="备注"></el-input></el-col>
                <el-col :span="6"><el-button height="14" width="14" style="margin-left: 20px" @click="removeDomains(domain)" class="el-icon-remove-outline" ></el-button></el-col>
              </el-form-item>
            </el-row>
          </div>
          <!--      计算差价    -->
          <el-form-item style="margin-left: 700px">
            合计
            <span v-if="resultPrice<=0">(应退)：{{Math.abs(-this.resultPrice)}}</span>元
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">取消</el-button>
<!--            <el-button @click="print('ruleForm')">生成合同</el-button>-->
            <el-button @click="resetForm('ruleForm')">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane >

      <el-tab-pane label="解约协议" name="second" disabled>
        <div class="two">
          <div class="top">
            <h4><i></i>解约合同</h4>
          </div>
          <hr>

          <div class='imgStorage'>
            <!--                  <label id="lr_contract" for=""><input type="file" multiple="multiple"  id="sf_contract_upload"><span><i>+</i></span></label>-->
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/home/contract/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="top">
            <h4><i></i>物业交割单</h4>
          </div>
          <div class='imgStorage'>
            <!--                  <label id="lb_property_delivery" for=""><input type="file" multiple="multiple"  id="property_delivery_upload"><span><i>+</i></span></label>-->
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/home/contract/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2">
              <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="top">
            <h4><i></i>其他</h4>
          </div>
          <div class='imgStorage'>
            <!--                  <label id="lb_other" for=""><input type="file"  multiple="multiple" id="other_upload"><span><i>+</i></span></label>-->
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/home/contract/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3">
              <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <hr>
        <el-button @click="shangForm()">上一步</el-button>
<!--        <el-button @click="preview()">预览</el-button>-->
        <el-button @click="baocun()">保存</el-button>
      </el-tab-pane>


      <el-dialog title="收房合同查询" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-row>
            <el-col :span="12">
              <el-form-item label="小区名称">
                <el-input
                  v-model="form.premiseName"
                  placeholder="请输入小区名称"
                  clearable
                  size="small"
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="业主名称" >
                <el-input
                  v-model="form.ownerName"
                  placeholder="请输入业主名称"
                  clearable
                  size="small"
                  style="width: 200px"
                  @keyup.enter.native="handleQuery"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form>
        <el-table
          :data="typeList"
          stripe
          style="width: 100%">
          <el-table-column
            prop="ownerName"
            label="业主姓名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="houseName"
            label="房产信息"
            width="120">
          </el-table-column>
          <el-table-column
            prop="premiseName"
            label="小区名"
            width="120">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="签约日期"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作"
            width="120">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">选中</el-button>
            </template>
          </el-table-column>

        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="form.pageNum"
          :limit.sync="form.pageSize"
          @pagination="getList"
        />

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </el-tabs>
  </div>
</template>

<script>
// import {listEienaar } from "@/api/housing/eienaar";
import {saveContrat,printlist,wordList } from "@/api/houseClosing/contract";
import { listTermination} from "@/api/houseClosing/termination";
let Base64 = require('js-base64').Base64
export default {
  name: "index",
  data() {
    return {
      imageUrl: '',
      imageUrl2: '',
      imageUrl3: '',
      activeName: 'first',
      statusOptions:[],
      queryForm:{},
      total:0,
      returncount:0,
      getPrice:0,
      getcount:0,
      returnPrice:0,
      resultPrice:0,
      typeList:[],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '200px',
      ruleForm: {
        sfFinalStatementDetailList:[{}],
        sfFinalStatementDetailLists:[{}],
      },
      form:{
        pageNum: 1,
        pageSize: 10,
        ownerName: undefined,
        premiseName: undefined,
      },
      rules: {
        id: [
          { required: true, message: '请输入收房合同编号', trigger: 'blur' },
        ],
        sfContractNo: [
          { required: true, message: '请输入合同编号', trigger: 'blur' },
        ],
        houseName: [
          { required: true, message: '请选择房产信息', trigger: 'change' }
        ],
        cqAddress: [
          {  required: true, message: '产权地址', trigger: 'change' }
        ],
        houseZsNo: [
          {  required: true, message: '请输入证书编号', trigger: 'change' }
        ],
        ownerMobile: [
          {  required: true, message: '请输入业主联系方式', trigger: 'change' }
        ],
        ownerName: [
          { required: true, message: '请输入业主姓名', trigger: 'change' }
        ],
        signUserName: [
          { required: true, message: '请输入签约人姓名', trigger: 'blur' }
        ],
        signUserMobile: [
          { required: true, message: '请输入签约人电话', trigger: 'blur' }
        ],
        wyjgDate: [
          {  required: true, message: '请输入物业交割日期', trigger: 'blur' }
        ],
        terminationType: [
          { required: true, message: '请输入解约类型', trigger: 'blur' }
        ]
      },

    };
  },
  methods: {
    preview(){
      var url='http://localhost/dev-api/houseClosing/images/index.pdf';
      window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
    },
    //解约合同
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file);
      console.log(res);
    },
    //物业交割单图片上传
    handleAvatarSuccess2(res, file) {
      this.imageUrl2 = URL.createObjectURL(file.raw);
      console.log(file);
      console.log(res);
    },
    //其他图片上传
    handleAvatarSuccess3(res, file) {
      this.imageUrl3 = URL.createObjectURL(file.raw);
      console.log(file);
      console.log(res);
    },
    addDomain() {
      this.ruleForm.sfFinalStatementDetailList=[]
      this.ruleForm.sfFinalStatementDetailList.push({
        value:'',
        key:Date.now()
      });
    },

    addDomains() {
      this.ruleForm.sfFinalStatementDetailLists=[]
      this.ruleForm.sfFinalStatementDetailLists.push({
        value: '',
        key: Date.now()
      });
    },

    returnpriceCount(price,index){
      var returnIdex = 0
      if (returnIdex == index){
        this.returncount ++
      }

      if (this.ruleForm.id==null || this.ruleForm.id==''){
        return;
      }

      this.returnPrice = 0;

      for (var i = 0; i < this.ruleForm.sfFinalStatementDetailList.length; i++) {
        if (this.returncount>1){
          this.ruleForm.sfFinalStatementDetailList[index].amount = price
        }
        this.returnPrice = this.returnPrice + parseFloat(this.ruleForm.sfFinalStatementDetailList[i].amount)
      }
      this.resultPrice = (this.getPrice - this.returnPrice).toFixed(2)
    },getpriceCount(price,index){
      var getIdex = 0
      if (getIdex == index){
        this.getcount ++
      }

      if (this.ruleForm.id==null || this.ruleForm.id==''){
        return;
      }
      this.getPrice = 0;

      for (var i = 0; i < this.ruleForm.sfFinalStatementDetailLists.length; i++) {
        if (this.getcount>1){
          this.ruleForm.sfFinalStatementDetailLists[index].amount = price
        }
        this.getPrice = this.getPrice + parseFloat(this.ruleForm.sfFinalStatementDetailLists[i].amount)
      }


      this.resultPrice = (this.getPrice - this.returnPrice).toFixed(2)
    },
    //删除动态添加框
    removeDomain(item) {
      var index = this.ruleForm.sfFinalStatementDetailList.indexOf(item)
      if (index !== -1) {
        this.ruleForm.sfFinalStatementDetailList.splice(index, 1)
      }

    },
    //删除动态添加框
    removeDomains(item) {
      var index = this.ruleForm.sfFinalStatementDetailLists.indexOf(item)
      if (index !== -1) {
        this.ruleForm.sfFinalStatementDetailLists.splice(index, 1)
      }
    },
    handleClick(row) {
      console.log(row);
      this.ruleForm = row;
      /*this.ruleForm = {
        sfFinalStatementDetailList:[],
        sfFinalStatementDetailLists:[]
      };*/
      this.dialogFormVisible=false;
    },
    /** 取消操作 */
    submitForm(formName) {
      this.ruleForm={
        sfFinalStatementDetailList:[],
        sfFinalStatementDetailLists:[]
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.form.pageNum = 1;
      this.getList();
    },
    getList() {
      listTermination(this.form).then(response => {
          console.log("列表",response);
          this.typeList = response.rows;
          this.total = response.total;
        }
      );
    },
    //保存成功后跳转
    baocun(){
      this.$router.push({path:"/ter"})
    },

    resetForm(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          saveContrat(this.ruleForm).then(response => {
            console.log(response);
            if (response.msg != null) {
              this.$message(response.msg );
            }
          })
        }else {
          console.log('error submit!!');
          return false;
        }
        this.activeName='second'
      })

    },
    //打印后下一步
    print(formName) {
      this.$refs[formName].validate((valid)=>{
        if(valid){
          printlist(this.ruleForm).then(response => {
            console.log(response);
            if (response.msg != null) {
              this.$message(response.msg );
            }
          })
        }else {
          console.log('error submit!!');
          return false;
        }
        this.activeName='second'

      });

    },
    shangForm(){
      this.activeName="first"
    },
    //查询弹出框
    chaxun(){
      this.form = {
        pageNum: 1,
        pageSize: 5,
        ownerName: undefined,
        premiseName: undefined,
      };
      //查询收房合同
      listTermination(this.form).then(response => {
        console.log(response)
        this.typeList = response.rows;
        this.total = response.total;
      });
      this.dialogFormVisible=true;
    }
  },save(){
    console.log(this.form)
  }

  ,created() {
    this.getList();
  }
}
</script>

<style scoped>
.spans{
  width: 1000px;
  border: solid 1px #ddd;
  margin-left: 48px;
  border-bottom: none;
  margin-bottom: -10px;
  border-top: solid 5px #ffa800;
  padding: 7px 0px;
  margin-top: 40px;
  font-family: "Microsoft Himalaya";
}
.line {
  height: 20px;
  width: 5px;
  border-radius: 10px;
  background: orange;
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  position: relative;
  top: 4px;
}
.div{
  border:1px solid #bfcbd9;
  margin: auto;
}
.fc{
  font-size: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
